<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="./js/STLLoader.js"></script>
    <script src="./js/OBJLoader.js"></script>
    <script src="./js/MTLLoader.js"></script>
    <script>
      var container = document.getElementById("container");

      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      // 辅助坐标系  参数200表示坐标系大小，可以根据场景大小去设置
      //   var axisHelper = new THREE.AxisHelper(200);
      //   scene.add(axisHelper);
      /**
       * 光源设置
       */
      //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      var point2 = new THREE.PointLight(0xffffff);
      point2.position.set(0, 200, 0); //点光源位置
      scene.add(point2); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      //加载模型
      //   var loader = new THREE.STLLoader();
      //   loader.load("./model/113157727.stl", function (geometry) {
      //     var textureLoader = new THREE.TextureLoader();

      //     textureLoader.load("./img/1.jpg", function (texture) {
      //       var material = new THREE.MeshLambertMaterial({
      //         map: texture, //设置纹理贴图
      //         // color: 0x7b3f00,
      //       });
      //       //   var geometry = new THREE.SphereGeometry(100, 100, 100); //立方体
      //       geometry.rotateX(-Math.PI / 2);
      //       geometry.translate(0, -30, 0);
      //       var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

      //       scene.add(mesh); //网格模型添加到场景中
      //     });
      //   });

      var OBJLoader = new THREE.OBJLoader();
      var MTLLoader = new THREE.MTLLoader();
      // 没有材质文件，系统自动设置Phong网格材质
      MTLLoader.load(
        "./model/10868_birthday-cake_v3.mtl",
        function (materials) {
          OBJLoader.setMaterials(materials);
          OBJLoader.load("./model/10868_birthday-cake_v3.obj", function (obj) {
            let geometry = obj.children[0].geometry;
            geometry.scale(10, 10, 10);
            geometry.rotateX(-Math.PI / 2);
            geometry.translate(0, -30, 0);
            scene.add(obj);
          });
        }
      );
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      renderer.render(scene, camera);

      function render() {
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(render); //请求再次执行渲染函数render
      }
      render();
      var controls = new THREE.OrbitControls(camera);
    </script>
  </body>
</html>
